<template>
    <div>
        <div>
            <el-table border class="eltable" :data="tableData" style="width: 100%">
                <el-table-column align="center" label="序号" width="80">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="ID" prop="id" width="80">
                </el-table-column>
                <el-table-column label="用户ID" align="center" prop="user_id" width="80">
                </el-table-column>
                <el-table-column align="center" label="用户名" prop="username" width="80">
                </el-table-column>
                <el-table-column align="center" label="日期" prop="createAt">
                </el-table-column>
                <el-table-column align="center" label="评论" :prop="type == '弹幕留言' ? 'msg_text' : 'wish_text'">
                </el-table-column>
                <el-table-column align="right">
                    <!-- <template slot="header" slot-scope="scope"> -->
                    <template slot="header">
                        <input type="text" placeholder="关键字" class="my-input" v-model="search">
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog title="修改评论" :visible.sync="centerDialogVisible" width="30%" center>
                <div>
                    <div class="opt">
                        <el-input v-model="newComment" placeholder="请输入"></el-input>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button @click="saveEdit" type="primary  ">保存修改</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui';

export default {
    data() {
        return {
            newComment: '',
            id: '',
            centerDialogVisible: false,
            // 表格数据
            tableData: [
                //     {
                //     id: 1,
                //     user_id: 1,
                //     username: "王小虎",
                //     imgUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                //     createAt: "2021-05-01",
                //     comment: "这是测试数据"
                // }
            ],
            search: '',
            // 控制随笔文章ID
            isOpen: false,  //true表示祝福评论，false表示弹幕评论

            // 防抖定时器
            timer: null,
        }
    },
    // 父组件传递的值(评论类型)
    props: {
        type: String,
        arr: Array
    },

    watch: {
        // 监听父组件传递的值
        type: function () {
            this.isOpenFn()
            this.search = ''
        },
        arr: function () {
            this.tableData = this.arr
        },
        search: function () {
            this.searchComment()
        }
    },
    created() {
        // console.log(this.type)
        this.tableData = this.arr
    },
    methods: {

        searchComment() {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.$emit('searchComment', {
                    keyword: this.search
                })
            }, 500)
        },
        isOpenFn() {
            if (this.type == "随笔评论") {
                this.isOpen = true
            } else {
                this.isOpen = false
            }
        },
        handleDelete(row) {
            // console.log(row);
            MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('removeComment', row)
            }).catch(() => {
                Message({
                    offset: 100,
                    showClose: true,
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        handleEdit(row) {
            // console.log(row);
            if (this.type == '祝福评论') {
                this.newComment = row.wish_text
            } else if (this.type == '弹幕留言') {
                this.newComment = row.msg_text
            }
            this.id = row.id
            this.centerDialogVisible = true;
        },

        // 保存修改
        saveEdit() {
            this.$emit('modifyComment', {
                id: this.id,
                comment: this.newComment
            })
            this.centerDialogVisible = false;
        }
    }
}
</script>

<style lang="less" scoped>
.eltable {
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.my-input {
    width: 100% !important;
    height: 28px;
    line-height: 28px;
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    border-radius: 4px;
}
</style>